<template>
  <div class="outer">
    <h2 class="title">
      <a target="_blank" href="https://daneden.github.io/animate.css/">animate.css</a>
    </h2>
    <div class="animated-container">
      <div
        class="item"
        v-for="item in names"
        :class="item === disabled ? '' : [item, 'animated']"
        @click="handleClick(item)"
        :key="item"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
import names from './names.json'

export default {
  title: 'animate.css',
  data() {
    return {
      names,
      disabled: ''
    }
  },
  methods: {
    handleClick(disabled) {
      this.disabled = disabled
      setTimeout(() => {
        this.disabled = ''
      }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./animate.css";
.outer {
  background: url(./brown-papersq.png);
}
.title {
  line-height: 3;
  text-align: center;
  padding-top: 30px;
  font-size: 30px;
  a {
    color: white;
  }
}
.animated-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item {
  width: 135px;
  height: 135px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: #1da57a;
  font-weight: bold;
  background: white;
  margin: 20px;
  text-align: center;
  line-height: 135px;
  font-size: 14px;
  border-radius: 6px;
  transition: box-shadow 0.3s;
  animation-fill-mode: none;
  cursor: pointer;
  &:hover {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  }
}
</style>
